<template>
  <div>
    
    <div id="swiper-container" class="swiper-container" :style="swiperStyle">
      <div class="swiper-wrapper" :style="swiperStyle">
        <!-- 面试题：v-if 和v-for 可以一起使用吗
         可以 不建议一起使用  v-for 优先级高
         先循环然后判断了多次 浪费性能-->
        <div class="swiper-slide"  v-for="(item,index) in items" :key="item.id" :style="swiperStyle"  v-if="index==currentIndex"
        >
             <img  :style="swiperStyle" :src="item.url" alt="">
        </div>
      
      </div>
      <!-- 前后按钮部分 -->
      <div class="btn_wrap">
         <span class="prev" @click="toprev">&lt;</span>
         <span class="next" @click="tonext">&gt;</span>
      </div>
      <!-- 小圆点 -->
       <div class="dots" :style="{width:items.length*60+'px',marginLeft:-(items.length*60/2)+'px'}">
           <ul>
             <li @click="changeIndex(index)" :class="index==currentIndex?'active':''" v-for="(item,index) in items"></li>
           </ul>
       </div>
       <!-- 标题插槽 -->
        <div class="title_wrap" v-if="isShowTitle">
           <slot name="title"></slot>
        </div>
    </div>
  </div>
  
</template>
<script>
export default {
   props:{
      items:{ //传轮播图数据数组
        type:Array,
        default:()=>[]
      },
      interval:{ //切换的间隔时间
        type:Number,
        default:2000
      },
      autoplay:{ //是否自动播放
         type:Boolean,
        default:false
      },
      swiperStyle:{ //默认的宽高
        type:Object,
         default:()=>({width:'500px',height:'500px'})
      },
      isShowTitle:{ //是否显示标题插槽
         type:Boolean,
        default:false
      }
   },
   mounted() {
      //  this.init()
   },
   watch:{
     items:{
        handler(newVal){
           console.log(newVal,"监听props的变化")
          if(newVal.length!=0){
            this.init()//初始化方法
          }
        },
        deep:true,
        immediate:true//立即监听
      }
   },
   methods:{
      init(){
        if(this.autoplay){ //判断是否自动播放
        // 定时器让下标++
        console.log("初始化方法")
        this.timer=setInterval(()=>{
          this.currentIndex++
          if(this.currentIndex>=this.items.length){
            this.currentIndex=0;
          }
          // 自动轮播的下标传给父组件
          this.$emit("sendIndex",this.currentIndex)
        },this.interval)
      }else{
        clearInterval(this.timer)
      }
    },
    toprev(){ //前一张下标--
     this.currentIndex--
     if(this.currentIndex<0){ //判断是否小于0
      //小于0 切换最后一张
      this.currentIndex=this.items.length-1;
     }
       this.$emit("sendIndex",this.currentIndex)
    },
    tonext(){ //下一张
      this.currentIndex++
      if(this.currentIndex>=this.items.length){
        this.currentIndex=0;
      }
        this.$emit("sendIndex",this.currentIndex)
    },
    changeIndex(index){ //点击圆点
      this.currentIndex=index;
       this.$emit("sendIndex",this.currentIndex)
    }
   },
   data(){
    return {
      currentIndex:0,//当前显示的下标
      timer:null//定时器
    }
   }
}
</script>
<style lang="scss">
#swiper-container{
    position: relative;
    margin: 20px auto;
}
  .swiper-wrapper{
    width: 100%;
    margin: 20px auto;
    overflow: hidden;

  }
  
    .btn_wrap{
      span{
        width: 60px;
        height: 80px;
        position: absolute;
        line-height: 80px;
        text-align: center;
        top:40%;
        left:0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 40px;
        font-family: "黑体";
        cursor: pointer;
        &.next{
          left: auto;
          right:0;
        }
      }
      
    }
    .dots{
     
      height: 40px;
      position: absolute;
      bottom:40px;
      left:50%;
      margin-left: -150px;
      ul{
        display: flex;
        li{
          list-style: none;
          width: 40px;
          height: 40px;
          background: red;
          border-radius: 50%;
          margin: 0 10px;
          cursor: pointer;
          &.active{
            background: blue;
          }
        }
      }
    }
    .title_wrap{
      width: 180px;
      height: 100px;
      background: skyblue;
      position: absolute;
      top:0;
      left:0;
    }
</style>